<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    height="auto"
    :title="modalType == 'module' ? $t('leftTree.addModule') : $t('addModuleModal.title')"
    class="win-module"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="addModule"
    @close="cancelModal"
  >
    <je-form ref="formRefModule" layout="vertical">
      <je-form-item
        :label="$t('addModuleModal.nameLabel')"
        v-bind="validateInfos.name"
        label-align="top"
      >
        <je-input v-model:value="modelRef.name" @change="changeName" />
      </je-form-item>
      <je-form-item
        :label="$t('addModuleModal.codeLabel')"
        v-bind="validateInfos.code"
        label-align="top"
      >
        <je-input v-model:value="modelRef.code" />
      </je-form-item>
      <span v-if="modalType == 'module'" class="annotation" label-align="top">
        {{ $t('addModuleModal.addHint') }}
      </span>
      <span v-if="modalType == 'rename'" class="annotation" label-align="top">
        {{ $t('addModuleModal.renaemHint') }}
      </span>
    </je-form>
  </je-modal>
</template>
<script>
  import { defineComponent, watch, ref, onMounted, reactive, toRaw } from 'vue';
  import { Input, Modal, Form } from '@jecloud/ui';
  import { pinyin } from '@jecloud/utils';
  import { addData, updateData } from '../../../api/index';
  import { verifyData } from '../../../helper/common';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ModalAddModule',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
    },
    props: {
      modalShow: {
        type: String,
        default: '',
      },
      modalData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      productData: {
        type: Object,
        required: true,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(true);
      const modalType = ref(props.modalShow);
      const modalData = ref(props.modalData);
      const modelRef = reactive({
        name: modalType.value == 'module' ? '' : modalData.value.text,
        code: modalType.value == 'module' ? '' : modalData.value.code,
      });
      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData', 'cancel');
      };
      const rulesRef = reactive({
        name: verifyData.name,
        code: verifyData.code,
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      const addModule = ({ $modal, button }) => {
        const modal = $modal,
          btn = button;
        btn.loading = true;
        //保存数据逻辑
        validate()
          .then(() => {
            let node = modalData.value;
            //添加
            if (modalType.value == 'module') {
              const params = {
                RESOURCETABLE_TABLENAME: modelRef.name.trim(),
                RESOURCETABLE_TABLECODE: modelRef.code.trim(),
                RESOURCETABLE_TYPE: 'MODULE',
                SY_PARENT: node.id ? node.id : 'ROOT',
                tableCode: 'JE_CORE_RESOURCETABLE',
                SY_PRODUCT_ID: props.productData.productId,
              };
              addData(params)
                .then((data) => {
                  //关闭弹窗
                  btn.loading = false;
                  modal.close();
                  Modal.notice(data.message, 'success');
                  emit('changeData', 'add');
                })
                .catch((e) => {
                  btn.loading = false;
                  Modal.alert(e.message, 'error');
                });
              //重命名
            } else if (modalType.value == 'rename') {
              updateData({
                tableCode: 'JE_CORE_RESOURCETABLE',
                JE_CORE_RESOURCETABLE_ID: node.id,
                RESOURCETABLE_TABLENAME: modelRef.name.trim(),
                RESOURCETABLE_TABLECODE: modelRef.code.trim(),
              })
                .then((data) => {
                  //关闭弹窗
                  btn.loading = false;
                  modal.close();
                  Modal.notice(data.message, 'success');
                  emit('changeData', 'add');
                })
                .catch((e) => {
                  btn.loading = false;
                  Modal.alert(e.message, 'error');
                });
            }
          })
          .catch((error) => {
            btn.loading = false;
          });
        return false;
      };

      //name值改变触发
      const changeName = () => {
        modelRef.code = pinyin(modelRef.name, 'PY');
      };

      return {
        validateInfos,
        resetFields,
        modelRef,
        cancelModal,
        addModule,
        visibleModule,
        modalType,
        centered: true,
        changeName,
      };
    },
  });
</script>
<style lang="less" scoped>
  .win-module {
    .annotation {
      color: #aaaaaa;
      line-height: 28px;
      font-size: 14px;
      font-weight: Italic;
      display: inline-block;
      font-style: oblique;
    }
  }
</style>
